<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-for="item in verifyList">姓名：{{item.name}}，年龄：{{item.age}}</div>
		</div>
		<script type="text/javascript">
			var vConsole = new VConsole();
			// 创建实例
			var app = new Vue({
				el: '#app',
				data() {
					return {
						listdata: [{
								name: '张三',
								age: 17
							},
							{
								name: '李四',
								age: 18
							}, {
								name: '王五',
								age: 19
							}
						],
						visible: true
					}
				},
				computed: {
					verifyList() {
						let showlist = [];
						//筛选出年龄大于17岁
						for (var i = 0; i < this.listdata.length; i++) {
							if (this.listdata[i].age > 17) {
								showlist.push(this.listdata[i]);
							}
						}
						return showlist;
					}
				},
				methods: {}
			});
			console.log("渲染函数", app.$options.render);
		</script>
	</body>
</html>
